<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
<!--    <t-card title="专利" class="dashboard-rank-card" >-->
      <div style="display: flex;flex-direction: column;gap: 10px">
        <t-row :gutter="[16, 16]">
          <t-col :xs="12" :xl="12">
            <t-card title="成果类型" >
              <chart-view  :chartOption="resultChartOpt1"
                          :autoResize="false" height="326px"/>
            </t-card>
          </t-col>
        </t-row>
<!--        <t-row :gutter="[16, 16]">-->
<!--          <t-col :xs="12" :xl="12">-->
<!--            <t-card title="子系统成果" >-->
<!--              <chart-view  :chartOption="resultChartOpt2"-->
<!--                          :autoResize="false" height="326px"/>-->
<!--            </t-card>-->
<!--          </t-col>-->
<!--        </t-row>-->
        <t-row align="stretch" :gutter="[16, 16]">
          <t-col :xs="12" :xl="6">
            <t-card title="年度曲线" class="dashboard-rank-card">
              <t-tabs :defaultValue="0" @change="(val)=>{getResultYear(val)}">
                <t-tab-panel :value="index" v-for="(item,index) in achievementList" :key="index" :label="item">
                  <chart-view :chartOption="resultYearOpt"
                              :autoResize="false" height="326px"/>
                </t-tab-panel>
              </t-tabs>
            </t-card>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-card title="单位排名" class="dashboard-rank-card">
              <t-tabs :defaultValue="0" @change="(val)=>{getResultRank(val)}">
                <t-tab-panel  :value="index" v-for="(item,index) in achievementList" :key="index" :label="item">
                              <t-table  size="small" hover :data="resultRankData" :columns="resultRankColumns" rowKey="departmentId">
                                <template #id="{ rowIndex }">
                              <span :class="getRankClass(rowIndex)">
                                {{ rowIndex + 1 }}
                              </span>
                                </template>
                              </t-table>
                </t-tab-panel>
              </t-tabs>
            </t-card>
          </t-col>
        </t-row>
        <t-row :gutter="[16, 16]">
          <t-col :xs="12" :xl="4">
            <t-card title="论文级别" >
              <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/thesis/thesis-index','paperLevel')}" :chartOption="thesisChartOpt1"
                          :autoResize="false" height="326px"/>
            </t-card>
          </t-col>
          <t-col :xs="12" :xl="4">
            <t-card title="著作级别" >
              <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/treatise/treatise-index','treatiseLevel')}" :chartOption="treatiseChartOpt1"
                          :autoResize="false" height="326px"/>
            </t-card>
          </t-col>
          <t-col :xs="12" :xl="4">
            <t-card title="工法级别" >
              <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/gf/gf-index','level')}" :chartOption="gfChartOpt1"
                          :autoResize="false" height="326px"/>
            </t-card>
          </t-col>
        </t-row>
        <t-row :gutter="[16, 16]">
          <t-col :xs="12" :xl="4">
            <t-card title="奖项级别" >
              <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/awards/awards-index','awardsLevel')}" :chartOption="awardChartOpt1"
                          :autoResize="false" height="326px"/>
            </t-card>
          </t-col>
          <t-col :xs="12" :xl="4">
            <t-card title="奖项种类" >
              <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/awards/awards-index','awardsType')}" :chartOption="awardChartOpt2"
                          :autoResize="false" height="326px"/>
            </t-card>
          </t-col>
          <t-col :xs="12" :xl="4">
            <t-card title="奖项等级" >
              <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/awards/awards-index','awardsGrade')}" :chartOption="awardChartOpt3"
                          :autoResize="false" height="326px"/>
            </t-card>
          </t-col>
        </t-row>
      <t-row :gutter="[16, 16]">
        <t-col :xs="12" :xl="6">
          <t-card title="专利类型" >
            <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/patent/patent-index','patentType')}" :chartOption="patentChartOpt1"
                        :autoResize="false" height="326px"/>
          </t-card>
        </t-col>
        <t-col :xs="12" :xl="6">
          <t-card title="专利状态" >
            <chart-view @click="(data)=>{clickToIndex(data,'/cgzh/patent/patent-index','patentStatus')}" :chartOption="patentChartOpt2"
                        :autoResize="false" height="326px"/>
          </t-card>
        </t-col>
      </t-row>
<!--      <t-row :gutter="[16, 16]">-->
<!--        <t-col :xs="12" :xl="12">-->
<!--          <t-card title="专利年度申请和授权" >-->
<!--            <template #actions>-->
<!--              <t-radio-group @change="(val)=>{getZlMapByYear(val)}" default-value="1">-->
<!--                <t-radio-button value="1">年度申请</t-radio-button>-->
<!--                <t-radio-button value="2">年度授权</t-radio-button>-->
<!--              </t-radio-group>-->
<!--            </template>-->
<!--            <chart-view :chartOption="patentChartOpt3"-->
<!--                        :autoResize="false" height="326px"/>-->
<!--          </t-card>-->
<!--        </t-col>-->
<!--      </t-row>-->
<!--      <t-row :gutter="[16, 16]">-->
<!--        <t-col :xs="12" :xl="6">-->
<!--          <t-card title="专利单位排名" class="dashboard-rank-card">-->
<!--            <template #actions>-->
<!--              <t-radio-group @change="(val)=>{getZlDeptMap(val)}" default-value="1">-->
<!--                <t-radio-button value="1">申请数</t-radio-button>-->
<!--                <t-radio-button value="2">授权数</t-radio-button>-->
<!--              </t-radio-group>-->
<!--            </template>-->
<!--            <t-table hover :data="patentRankData" :columns="patentRankColumns" rowKey="departmentId">-->
<!--              <template #id="{ rowIndex }">-->
<!--            <span :class="getRankClass(rowIndex)">-->
<!--              {{ rowIndex + 1 }}-->
<!--            </span>-->
<!--              </template>-->
<!--            </t-table>-->
<!--          </t-card>-->
<!--        </t-col>-->
<!--      </t-row>-->
      </div>
<!--    </t-card>-->
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      achievementList:[
        '论文',
        '著作',
        '专利',
        '软件著作权',
        '获奖',
        '工法',
        '其他'
      ],
      resultYearOpt:{},
      resultChartOpt1:{},
      resultChartOpt2: {},
      patentChartOpt1: {},
      patentChartOpt2: {},
      patentChartOpt3: {},
      patentChartOpt4: {},
      patentRankData: [],
      patentRankColumns: [
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "year",
          title: "年度",
          align: "center",
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          width: 180
        },
        {
          colKey: "count",
          title: "个数",
          align: "center",
        },
      ],
      resultRankData: [],
      resultRankColumns: [
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        // {
        //   colKey: "year",
        //   title: "年度",
        //   align: "center",
        // },
        {
          colKey: "name",
          title: "单位名称",
          align: "center",
          width: 180
        },
        {
          colKey: "count",
          title: "个数",
          align: "center",
        },
      ],
      thesisChartOpt1: {},
      awardChartOpt1: {},
      awardChartOpt2: {},
      awardChartOpt3: {},
      treatiseChartOpt1: {},
      gfChartOpt1: {}
    }
  },
  created() {
    this.getAllByPatentType();
    this.getByPatentStatus();
    this.getZlMapByYear('1');
    this.getZlDeptMap('1');
    this.getAllCgCount();
    this.getCountForService();
    this.getResultYear(0);
    this.getResultRank(0);
    this.getByThesisLevel();
    this.getAllByAwardLevel();
    this.getAllByAwardType();
    this.getAllByAwardGrade();
    this.getByTreatiseLevel();
    this.getByConstructMethodLevel();
  },
  methods: {
    getByThesisLevel(){
      this.$api.cgzh.home.getByThesisLevel().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.thesisChartOpt1 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllByAwardLevel(){
      this.$api.cgzh.home.getAllByAwardLevel().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.awardChartOpt1 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllByAwardType(){
      this.$api.cgzh.home.getAllByAwardType().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.awardChartOpt2 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllByAwardGrade(){
      this.$api.cgzh.home.getAllByAwardGrade().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.awardChartOpt3 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByTreatiseLevel(){
      this.$api.cgzh.home.getByTreatiseLevel().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.treatiseChartOpt1 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByConstructMethodLevel(){
      this.$api.cgzh.home.getByConstructMethodLevel().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.gfChartOpt1 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getResultRank(type){
      this.resultRankData = []
      if(type===0){
        this.$api.cgzh.home.getThesisDeptMap().then(response => {
          this.resultRankData = response.data;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      } else if(type===1){
        this.$api.cgzh.home.getTreatiseDeptMap().then(response => {
          this.resultRankData = response.data;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===2){
        this.$api.cgzh.home.getZlDeptMap(0).then(response => {
          this.resultRankData = response.data;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===3){
        this.$api.cgzh.home.getSoftDeptMap().then(response => {
          this.resultRankData = response.data;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===4){
        this.$api.cgzh.home.getJxDeptMap().then(response => {
          this.resultRankData = response.data;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===5){
        this.$api.cgzh.home.getMethodDeptMap().then(response => {
          this.resultRankData = response.data;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===6){
        this.$api.cgzh.home.getPerformanceDeptMap().then(response => {
          this.resultRankData = response.data;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
    },
    getResultYear(type){
      this.resultYearOpt = {};
      if(type===0){
        this.$api.cgzh.home.getThesisCountByYear().then(response => {
          const data1 = [];
          response.data.forEach(val => {
            data1.push(val.year)
          })
          const data2 = [];
          response.data.forEach(val => {
            data2.push(val.count)
          })
          this.resultYearOpt = this.$eChartFn.getLineChart(data1, data2);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      } else if(type===1){
        this.$api.cgzh.home.getTreatiseCountByYear().then(response => {
          const data1 = [];
          response.data.forEach(val => {
            data1.push(val.year)
          })
          const data2 = [];
          response.data.forEach(val => {
            data2.push(val.count)
          })
          this.resultYearOpt = this.$eChartFn.getLineChart(data1, data2);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===2){
        this.$api.cgzh.home.getZlMapByYear(0).then(response => {
          const data1 = [];
          response.data.forEach(val => {
            data1.push(val.year)
          })
          const data2 = [];
          response.data.forEach(val => {
            data2.push(val.count)
          })
          this.resultYearOpt = this.$eChartFn.getLineChart(data1, data2);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===3){
        this.$api.cgzh.home.getSoftCountByYear().then(response => {
          const data1 = [];
          response.data.forEach(val => {
            data1.push(val.year)
          })
          const data2 = [];
          response.data.forEach(val => {
            data2.push(val.count)
          })
          this.resultYearOpt = this.$eChartFn.getLineChart(data1, data2);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===4){
        this.$api.cgzh.home.getAwardsCountByYear().then(response => {
          const data1 = [];
          response.data.forEach(val => {
            data1.push(val.year)
          })
          const data2 = [];
          response.data.forEach(val => {
            data2.push(val.count)
          })
          this.resultYearOpt = this.$eChartFn.getLineChart(data1, data2);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else if(type===5){
        this.$api.cgzh.home.getMethodCountByYear().then(response => {
          const data1 = [];
          response.data.forEach(val => {
            data1.push(val.year)
          })
          const data2 = [];
          response.data.forEach(val => {
            data2.push(val.count)
          })
          this.resultYearOpt = this.$eChartFn.getLineChart(data1, data2);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
      else if(type===6){
        this.$api.cgzh.home.getPerformanceCountByYear().then(response => {
          const data1 = [];
          response.data.forEach(val => {
            data1.push(val.year)
          })
          const data2 = [];
          response.data.forEach(val => {
            data2.push(val.count)
          })
          this.resultYearOpt = this.$eChartFn.getLineChart(data1, data2);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
    },
    getCountForService(){
      this.$api.cgzh.home.getCountForService().then(response => {
        const xdata = Object.keys(response.data)
        const vdata = Object.values(response.data)
        const seriesList = []
        if(Object.keys(vdata).length>0){
          Object.keys(vdata[0]).forEach(val=>{
            seriesList.push({
              name: val,
              data: []
            })
          })
        }
        seriesList.forEach((val,index)=>{
          vdata.forEach((val2,index2)=>{
            seriesList[index].data.push(val2[seriesList[index].name])
          })
        })
        const series = seriesList.map(val=>({
          name: val.name,
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
            // position: 'top',
            formatter(d) {
              return  d.data>0?`${d.data}个`:'';
            },
          },
          // emphasis: {
          //   focus: 'series'
          // },
          data: val.data
        }))
        this.resultChartOpt2 = this.$eChartFn.getBarChart(xdata, [],{
          series
        });
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllCgCount(){
      this.$api.cgzh.home.getAllCgCount().then(response => {
        const xdata = Object.keys(response.data)
        this.resultChartOpt1 = this.$eChartFn.getBarChart(xdata, Object.values(response.data),{},'个');
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getRankClass(index) {
      return ['dashboard-rank__cell', {'dashboard-rank__cell--top': index < 3}];
    },
    getZlMapByYear(type) {
      this.$api.cgzh.home.getZlMapByYear(type).then(response => {
        const data1 = [];
        response.data.forEach(val => {
          data1.push(val.year)
        })
        const data2 = [];
        response.data.forEach(val => {
          data2.push(val.count)
        })
        this.patentChartOpt3 = this.$eChartFn.getLineChart(data1, data2);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getZlDeptMap(type) {
      this.$api.cgzh.home.getZlDeptMap(type).then(response => {
        this.patentRankData = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getAllByPatentType() {
      this.$api.cgzh.home.getAllByPatentType().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.patentChartOpt1 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByPatentStatus() {
      this.$api.cgzh.home.getByPatentStatus().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.patentChartOpt2 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    clickToIndex(data, path, param) {
      const query = {}
      query[param] = data.data.lableValue
      this.$router.push({
        path,
        query
      })
    },
  }
}
</script>

<style lang="less" scoped>
.card {
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .title {
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card {
  height: 100%;
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>

